<template>
  <views class="dubious_logistics">
    <viewTitle :title="'可疑托运单列表'"></viewTitle>
    <div class="search">
      <el-form ref="form" label-width="auto" :inline="true">
        <el-form-item label="物流企业:">
          <el-input type="text" clearable placeholder="请输入关键字" v-model="logistics_enterprise"></el-input>
        </el-form-item>
        <el-form-item label="企业类型:">
          <el-select v-model="company_type" clearable placeholder="请选择">
            <el-option
                v-for="item in company_type_list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="到达站点:">
          <el-cascader v-model="station" :options="regionList" @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="寄件人:">
          <el-input type="text" clearable placeholder="请输入关键字" v-model="sender"></el-input>
        </el-form-item>
        <el-form-item label="寄件人联系方式:">
          <el-input type="text" clearable placeholder="请输入关键字" v-model="sender_phone"></el-input>
        </el-form-item>
        <el-form-item label="收件人:">
          <el-input type="text" clearable placeholder="请输入关键字" v-model="recipients"></el-input>
        </el-form-item>
        <el-form-item label="收件人联系方式:">
          <el-input type="text" clearable placeholder="请输入关键字" v-model="recipients_phone"></el-input>
        </el-form-item>
        <el-form-item label="寄件时间:">
          <el-date-picker
              v-model="registration_date"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>

      <div class="btn-area">
        <el-button type="primary" @click="getData">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>
    <div class="table_list">
<!--      <div class="judge_text">{{judge}}</div>-->
      <el-table :data="tableList" style="width: 100%" border :header-cell-style="getRowClass">
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        <el-table-column prop="logistics_no" label="托运单号" width="180"></el-table-column>
        <el-table-column prop="handle_status_name" label="状态" width="180"></el-table-column>
        <el-table-column prop="company_name" label="承运物流企业" width="200"></el-table-column>
        <el-table-column :formatter="(row)=>{return row.company_type == 1 ? '快递':'物流'}" label="企业类型"
                         width="120"></el-table-column>
        <el-table-column prop="arrive_region_name" label="送达站点" width="300"></el-table-column>
        <el-table-column prop="post_communicate_name" label="寄件人" width="180"></el-table-column>
        <el-table-column prop="post_communicate_mobile" label="寄件人联系方式" width="180"></el-table-column>
        <el-table-column prop="receive_communicate_name" label="收件人" width="150"></el-table-column>
        <el-table-column prop="receive_communicate_mobile" label="收件人联系方式" width="180"></el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="200"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="success" v-if="isToDetail" @click="toDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex flexR paging">
        <el-pagination
            style="background:#fff; padding:10px 0"
            background
            layout="prev, pager, next,sizes,total, jumper"
            @size-change="(page_size) => {this.pagination.page_size = page_size;this.getData()}"
            @current-change="(page_start) => {this.pagination.page_start = page_start;this.getData()}"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pagination.page_size"
            :total="pagination.total_count"
            :current-page="pagination.current_page"
            :page-count="pagination.page_count"
        ></el-pagination>
      </div>
    </div>
  </views>
</template>

<script>
	import {mapGetters} from 'vuex'

	export default {
		data() {
			return {
				station: [], // 站点
				logistics_enterprise: "", // 物流企业
				sender: "", // 寄件人
				sender_phone: "", // 寄件人联系方式
				recipients: "", // 收件人
				recipients_phone: "", // 收件人联系方式
				tableList: [],
				pagination: {
					page_start: 0, //搜索开始页码
					current_page: 0, //当前页码
					page_count: 0, //总页数
					page_size: 10, //每页数量
					total_count: 0 //总数量
				},
				regionList: [],
				company_type: null,
				company_type_list: [
					{value: null, label: '全部'},
					{value: 0, label: '物流'},
					{value: 1, label: '快递'}
				],
				registration_date: [],
				judge: '',
				dubious_line: '',
				dubious_goods: '',
				dubious_person: '',
				dubious_samemobile: '',
				dubious_samename: '',
				dubious_sameaddress: '',
				dubious_eqmemberneqpost: '',
				dubious_eqmemberneqget: '',
				dubious_eqmemberneqcompany: '',
				dubious_manual: '',
			};
		},
		computed: {
			...mapGetters(["authority"]),
			isToDetail() {
				return this.authority[this.$route.fullPath] && this.authority[this.$route.fullPath].q;
			},
			post_data() {
				let post = {};
				post.company_name = this.logistics_enterprise || '';
				post.arrive_region = this.station.slice(-1)[0] || 0;
				post.post_communicate_name = this.sender || '';
				post.post_communicate_mobile = this.sender_phone || '';
				post.receive_communicate_name = this.recipients || '';
				post.receive_communicate_mobile = this.recipients_phone || '';
				post.pagination = this.pagination;
				post.type = this.company_type;
				post.dubious_line = this.dubious_line;
				post.dubious_goods = this.dubious_goods;
				post.dubious_person = this.dubious_person;
				// post.dubious_person = this.dubious_person;
				post.dubious_samemobile = this.dubious_samemobile;
				post.dubious_samename = this.dubious_samename;
				post.dubious_sameaddress = this.dubious_sameaddress;
				post.dubious_eqmemberneqpost = this.dubious_eqmemberneqpost;
				post.dubious_eqmemberneqget = this.dubious_eqmemberneqget;
				post.dubious_eqmemberneqcompany = this.dubious_eqmemberneqcompany;
				post.dubious_manual = this.dubious_manual;
				if (this.registration_date.length > 0) {
					post.create_time_start = this.registration_date[0] / 1000;     //开始时间
					post.create_time_end = this.registration_date[1] / 1000;     //结束时间
				}
				return post;
			}
		},
		watch: {
			'$route'(to, from) { //监听路由是否变化
				// if (to.query.type != from.query.type) {
				let type = to.path.split('dubious_logistics_')[1];
				this.dubious_goods = type == 1 ? '1' : '';
				this.dubious_line = type == 2 ? '1' : '';
				this.dubious_person = type == 3 ? '1' : '';
				// this.dubious_person = to.query.type == 3 ? '1' : '';
				this.dubious_samemobile = type == 5 ? '1' : '';
				this.dubious_samename = type == 6 ? '1' : '';
				this.dubious_sameaddress = type == 7 ? '1' : '';
				this.dubious_eqmemberneqpost = type == 8 ? '1' : '';
				this.dubious_eqmemberneqget = type == 9 ? '1' : '';
				this.dubious_eqmemberneqcompany = type == 10 ? '1' : '';
				this.dubious_manual = type == 4 ? '1' : '';
				this.getData();
				// }
			}
		},
		methods: {
			//    修改第一行样式
			getRowClass({row, column, rowIndex, columnIndex}) {
				if (rowIndex === 0) {
					return "background: #FAFAFA ";
				} else {
					return "";
				}
			},
			//    修改是否换行
			changeStyleRow(width) {
				let _width = width - 290 - 350 - 300 - 50 - 25;
				if (_width > 300) {
					this.marginLeft = 25;
				} else {
					this.marginLeft = 0;
				}
			},
			// 获取数据
			getData() {
				this.$raxios.post(
					this.$mapapi.admin_logisticsDubious, {
						data: this.post_data
					}).then(res => {
					if (res.code == 200) {
						this.tableList = res.data.list;
						this.pagination = res.data.pagination;
						this.$raxios.post(this.$mapapi.logisticsTyoeTotal, {
							data: this.post_data
						}).then(res => {
							if (res.code == 200) {
								this.judge = '';
								res.data.forEach(item => {
									if (item.dubious_type != 2)
										this.judge = `${this.judge}${item.value_name}：${item.count}，`
								});
								this.judge = this.judge.slice(0, -1)
							}
						})
					} else {
						this.tableList = [];
						this.pagination = [];
						this.$message.error(res.msg);
					}
				});
			},
			// 去详情
			toDetail(row) {
				this.$toRoutePath({
					path: "/logistics_list/logistics_list_detail",
					edit: true,
					query: {logistics_id: row.logistics_id}
				});
			},
			// 重置
			reset() {
				this.logistics_enterprise = '';
				this.station = '';
				this.sender = '';
				this.sender_phone = '';
				this.recipients = '';
				this.recipients_phone = '';
				this.registration_date = []; // 注册时间
				this.company_type = null; // 企业类型
				this.getData()
			},
			handleChange(value) {
				console.log(value);
			}
		},
		mounted() {
			let type = this.$route.path.split('dubious_logistics_')[1];
			this.dubious_goods = type == 1 ? '1' : '';
			this.dubious_line = type == 2 ? '1' : '';
			this.dubious_person = type == 3 ? '1' : '';
			this.dubious_samemobile = type == 5 ? '1' : '';
			this.dubious_samename = type == 6 ? '1' : '';
			this.dubious_sameaddress = type == 7 ? '1' : '';
			this.dubious_eqmemberneqpost = type == 8 ? '1' : '';
			this.dubious_eqmemberneqget = type == 9 ? '1' : '';
			this.dubious_eqmemberneqcompany = type == 10 ? '1' : '';
			this.dubious_manual = type == 4 ? '1' : '';

			this.getData();
		},
		created() {
			this.regionList = JSON.parse(localStorage.getItem('regionList')) || [];
			if (this.regionList.length == 0) {
				this.$raxios.post(
					this.$mapapi.admin_getALLRegion, {}
				).then(res => {
					if (res.code == 200) {
						localStorage.setItem('regionList', JSON.stringify(res.data));
						this.regionList = res.data;
					} else {
						this.regionList = [];
						this.$message.error(res.msg);
						return;
					}
				})
			}
		}
	};
</script>

<style lang="less" :scope="true" src="@/style/logistics_manager/dubious_logistics.less">
</style>
